/**
 * 官方文档：https://www.npmjs.com/package/dragact
 */

import React, { Component } from "react";
import { Dragact } from "dragact";

const fakeData = [
  { GridX: 0, GridY: 0, w: 4, h: 2, key: "0" },
  { GridX: 0, GridY: 0, w: 4, h: 2, key: "1" },
  { GridX: 0, GridY: 0, w: 4, h: 2, key: "2" }
];

const getblockStyle = isDragging => {
  return {
    background: isDragging ? "#1890ff" : "white"
  };
};

// 以下是自定义组件示例
class Page4 extends Component {
  render() {
    return <div className="">
        <p>拖拽示例</p>

        <Dragact 
            layout={fakeData}//必填项
            col={16}//必填项
            width={800}//必填项
            rowHeight={40}//必填项
            margin={[5, 5]}//必填项
            className='plant-layout'//必填项
            style={{ background: '#333' }}//非必填项
            placeholder={true}//非必填项
          >
          
          {/* 以下是循环每一个item，类似于map，组件中已经封装起来 */}
          {/* 参数一：item，fakeData的每一项 */}
          {/* 参数二：provided，提供拖拽属性值，共四个值 */}
          {/* 
            isDragging: Boolean
            dragHandle: any;
            resizeHandle: any;
            props: any; 
          */}
          {(item, provided) => {
            return <div {...provided.props} {...provided.dragHandle} style={{ ...provided.props.style, ...getblockStyle(provided.isDragging) }}>
                {provided.isDragging ? "正在抓取" : "停放"}
              </div>;
          }}
        </Dragact>
      </div>;
  }
}

export default Page4;
